<template>
	<div class="h5">
		<div class="h5__header">
			<div class="h5__icon">
				<div class="h5__icon-close" @click="back">
					<i class="iconfont icon-left"></i>
				</div>
				<div class="h5__icon-close" @click="close">
					<i class="iconfont icon-guanbi"></i>
				</div>
			</div>
			<span>京东</span>
		</div>

		<div class="h5__container">
			<iframe class="h5__webview" :src="query.url" frameborder="0"></iframe>
		</div>
	</div>
</template>

<script>
import store from 'store';
export default {
	data() {
		return {
			query: {
				url:
					'https://jingfen.jd.com/item.html?sku=59767503305&q=FHkUEhJrEXMQFBBfEnFCRxNmGSQRRxRtFXEXEBw9FyUUEkFtFXEbHURtQHQiFhxsGHgSFxZfVyVNQEAsfgZzB0RmRyYQEEZuQCEUFBFqFSJBRUZnRXdGQB1mECMQQR1qIHcbERJqE3kUJQ==&uabt=37_62&d=Oyopcj&cu=true&utm_source=kong&utm_medium=jingfen&utm_campaign=t_1001137157_yzf-1&utm_term=67580b48748c450e878a3eaf11621d45#/pages/common-coupon/common-coupon'
			}
		};
	},

	created() {},

	methods: {
		back() {
			this.$router.back();
		},

		close() {
			this.$router.push('/jd/goods-result');
		}
	}
};
</script>

<style lang="scss" scoped>
.h5 {
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	background-color: #fff;

	&__header {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80px;
		font-size: 28px;
		position: relative;
		border-bottom: 1px solid #eee;
		box-sizing: border-box;
	}

	&__icon {
		display: flex;
		align-items: center;
		height: 80px;
		font-size: 26px;
		position: absolute;
		left: 0;
		top: 0;
		text-align: center;

		&-back {
			width: 80px;
		}

		&-close {
			width: 80px;
		}
	}

	&__container {
		height: calc(100% - 90px);
		position: relative;
		overflow: auto;
	}

	&__webview {
		height: 100%;
		width: 100%;
	}
}
</style>
